import { size, formItemLayout, getFileList, getVideo } from '../../utils/common';
import React from 'react';
import { Modal, Form, Input, Select, InputNumber, Checkbox } from 'antd';
import * as api from '../../api/api';
import { FormComponentProps } from 'antd/lib/form';
import VideoUploads from '../../components/VideoUploads';
export interface AdvterEditProps extends FormComponentProps {
    visible: boolean,
    advter?: api.SingleUserMallAdvertsVOAdvertManageVO,
    loading: boolean,
    onSave: (any) => void,
    onCancel: () => void,
}
class AdvterEdit extends React.PureComponent<AdvterEditProps, any>{
    constructor(props) {
        super(props);
    }

    state = {
        content: '',
        fileList: []
    }

    componentDidMount() {
        const video = this.props.advter && this.props.advter.content;
        this.setState({ fileList: getFileList(video) });
    }

    ok = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, form) => {
            if (!err) {
                form['content'] = getVideo(this.state.fileList);
                this.props.onSave(form);
            }
        });
    }

    cancel = () => {
        this.props.onCancel();
    }


    videoChange = (fileList) => {
        this.setState({ fileList });
    }


    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { advter } = this.props;
        const { loading } = this.props;
        return (
            <Modal
                title='广告详情'
                visible={this.props.visible}
                onOk={this.ok}
                onCancel={this.cancel}
                maskClosable={true}
            >
                <Form>
                    <Form.Item {...formItemLayout} >
                        {getFieldDecorator('id', {
                            initialValue: advter && advter.id
                        })(<Input size={size} type="hidden" />)}
                    </Form.Item>
                    <Form.Item label="广告标题" {...formItemLayout}>
                        {getFieldDecorator('name', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入名称'
                                }
                            ],
                            initialValue: advter && advter.name
                        })(<Input size={size}
                            placeholder="请输入名称" />)}
                    </Form.Item>
                    <Form.Item label="广告上传" {...formItemLayout}>
                        {getFieldDecorator('content', {
                            rules: [{
                                required: true,
                                message: '请上传广告'
                            }],
                            initialValue: advter && advter.content
                        })
                            (<VideoUploads editable={true} fileList={this.state.fileList} onChange={this.videoChange} />)}
                    </Form.Item>
                    <Form.Item label="针对用户性别" {...formItemLayout}>
                        {getFieldDecorator('advertSex', {
                            rules: [
                                {
                                    required: true,
                                    message: '请选择'
                                }
                            ],
                            initialValue: advter && advter.advertSex
                        })(<Select
                            placeholder="请选择"
                        >
                            <Select.Option value="全部">全部</Select.Option>
                            <Select.Option value="男">男</Select.Option>
                            <Select.Option value="女">女</Select.Option>
                        </Select>)}
                    </Form.Item>
                    <Form.Item label="针对用户年龄" {...formItemLayout}>
                        {getFieldDecorator('advertAge', {
                            rules: [
                                {
                                    required: true,
                                    message: '请选择'
                                }
                            ],
                            initialValue: advter && advter.advertAge
                        })(<Select
                            placeholder="请选择"
                        >
                            <Select.Option value="全部">全部</Select.Option>
                            <Select.Option value="18岁以下">18岁以下</Select.Option>
                            <Select.Option value="18至30岁">18至30岁</Select.Option>
                            <Select.Option value="30至50岁">30至50岁</Select.Option>
                            <Select.Option value="50至70岁">50至70岁</Select.Option>
                        </Select>)}
                    </Form.Item>
                    <Form.Item label="针对用户收入" {...formItemLayout}>
                        {getFieldDecorator('advertIncome', {
                            rules: [
                                {
                                    required: true,
                                    message: '请选择'
                                }
                            ],
                            initialValue: advter && advter.advertIncome
                        })(<Select
                            placeholder="请选择"
                        >
                            <Select.Option value={0}>全部</Select.Option>
                            <Select.Option value={1}>低收入</Select.Option>
                            <Select.Option value={2}>中收入</Select.Option>
                            <Select.Option value={3}>高收入</Select.Option>
                        </Select>)}
                    </Form.Item>
                    <Form.Item label="红包金额" {...formItemLayout}>
                        {getFieldDecorator('redPacketAmount', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入红包金额'
                                }
                            ],
                            initialValue: advter && advter.redPacketAmount
                        })(<InputNumber size={size} />)}
                    </Form.Item>
                    <Form.Item label="是否启用" {...formItemLayout}>
                        {getFieldDecorator('isuse', {
                            valuePropName: 'checked',
                            initialValue: advter && advter.isUse
                        })(<Checkbox />)}
                    </Form.Item>
                </Form>
            </Modal>)
    }
}

export default Form.create()(AdvterEdit);